<template>
  <div class="home-view">
    <!-- 头部 -->
    <el-container style="height: 100%; border: 1px solid #eee">
      <el-header style="height: 60px; line-height: 60px; background-color: #409EFF; color: #fff; padding-left: 20px; display: flex; justify-content: space-between; align-items: center;">
        <span><i class="el-icon-house"></i> 熙心健康管理系统</span>
        <div style="display: flex; align-items: center;">
          <span style="margin-right: 20px;">系统管理员：{{ userName }}</span>
          <el-button type="danger" size="small" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px" style="background-color: #333; color: #fff;">
          <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="handleSelect" background-color="#333" text-color="#fff" active-text-color="#409EFF">
            <el-menu-item index="1">
              <i class="el-icon-house"></i>
              <router-link to="/first">首页</router-link>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-date"></i>
              <router-link to="/emp">体检预约</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-s-order"></i>
              <router-link to="/dept">预约列表</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-search"></i>
              <router-link to="/find">体检客户查询</router-link>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区 -->
        <el-main style="padding: 20px;">
          <div class="general-health-check">
            <!-- 血压输入 -->
            <el-row :gutter="20">
              <el-col :span="4">
                <span>收缩压</span>
              </el-col>
              <el-col :span="6">
                <el-input v-model="bloodPressure收缩压" placeholder="请输入收缩压"></el-input>
              </el-col>
              <el-col :span="4">
                <span style="color: #909399">正常值范围：-</span>
              </el-col>
              <el-col :span="4">
                <span>舒张压</span>
              </el-col>
              <el-col :span="6">
                <el-input v-model="bloodPressure舒张压" placeholder="请输入舒张压"></el-input>
              </el-col>
              <el-col :span="4">
                <span style="color: #909399">正常值范围：-</span>
              </el-col>
            </el-row>

            <!-- 科室小结 -->
            <el-row :gutter="20" class="department-summary">
              <el-col :span="24">
                <h4>科室小结</h4>
              </el-col>
              <el-col :span="6">
                <el-input type="textarea" :rows="3" placeholder="请输入科室小结" v-model="departmentSummary"></el-input>
              </el-col>
              <el-col :span="18">
                <div style="border: 1px solid #ebeef5; padding: 10px; background-color: #f9fafc; border-radius: 5px;">
                  <span style="color: #909399">科室小结：{{ departmentSummary || '超重' }}</span>
                </div>
              </el-col>
            </el-row>

            <!-- 责任医生 -->
            <el-row :gutter="20" class="responsible-doctor">
              <el-col :span="24">
                <h4>责任医生</h4>
              </el-col>
              <el-col :span="6">
                <el-form-item label="录入医师">
                  <el-input v-model="physician" placeholder="请输入录入医师姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="责任医师">
                  <el-input v-model="principalPhysician" placeholder="请输入责任医师姓名"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="2" style="text-align: right">
                <el-button type="primary" @click="saveBasicData">保存基础数据</el-button>
              </el-col>
            </el-row>

            <!-- 检查项目列表 -->
            <el-row>
              <el-collapse v-model="activePanels" class="check-items">
                <el-collapse-item v-for="(item, index) in checkItems" :key="index" :name="index.toString()">
                  <template #title>
                    <div>
                      {{ item.name }}
                      <span style="float: right; color: #909399">
                        <i class="el-icon-arrow-right"></i>
                      </span>
                    </div>
                  </template>
                  <!-- 展开内容 -->
                  <div class="collapse-content">
                    <p>{{ item.description }}</p>
                    <el-form-item :label="item.name">
                      <el-input v-model="item.inputValue" placeholder="输入具体值"></el-input>
                      <el-button type="primary" @click="saveCheckItem(item)">保存</el-button>
                    </el-form-item>
                  </div>
                </el-collapse-item>
              </el-collapse>
            </el-row>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'GeneralHealthCheck',
  data() {
    return {
      userName: 'admin',
      activeIndex: '4', // 默认激活第四个菜单项（体检客户查询）
      // 血压输入
      bloodPressure收缩压: '',
      bloodPressure舒张压: '',

      // 科室小结
      departmentSummary: '',

      // 责任医生
      physician: '', // 录入医师
      principalPhysician: '', // 责任医师

      // 检查项目
      activePanels: [], // 默认不展开任何面板
      checkItems: [
        { name: '视力+辨色力', description: '输入视力和辨色力检查结果', inputValue: '' },
        { name: '血常规24项', description: '输入血常规24项检查结果', inputValue: '' },
        { name: '肝功四项', description: '输入肝功四项检查结果', inputValue: '' },
        { name: '肾功能三项', description: '输入肾功能三项检查结果', inputValue: '' },
        { name: '血脂四项', description: '输入血脂四项检查结果', inputValue: '' },
        { name: '尿常规24项', description: '输入尿常规24项检查结果', inputValue: '' },
        { name: '颈动脉彩超', description: '输入颈动脉彩超检查结果', inputValue: '' },
        { name: '头部CT', description: '输入头部CT检查结果', inputValue: '' },
      ],
    };
  },
  methods: {
    // 保存基础数据
    saveBasicData() {
      const { bloodPressure收缩压, bloodPressure舒张压, departmentSummary, physician, principalPhysician } = this;
      console.log('保存基础数据:', {
        收缩压: bloodPressure收缩压,
        舒张压: bloodPressure舒张压,
        科室小结: departmentSummary,
        录入医师: physician,
        责任医师: principalPhysician,
      });
      // 可以在这里调用保存到数据库的逻辑
    },

    // 保存检查项目数据
    saveCheckItem(item) {
      console.log(`保存检查项目[${item.name}]数据: `, item.description, item.inputValue);
      // 可以在这里调用保存到数据库的逻辑
    },

    logout() {
      this.$message.success('退出成功！');
      this.$router.push('/login');
    },

    handleSelect(index) {
      this.activeIndex = index;
    },
  },
};
</script>

<style scoped>
.general-health-check {
  padding: 20px;
}

.home-view {
  height: 100vh;
  display: flex;
}

.el-header {
  background-color: #409EFF;
  color: #fff;
}

.el-aside {
  background-color: #333;
  color: #fff;
}

.el-main {
  background-color: #f0f2f5;
}

.el-menu {
  border-right: none;
}

.el-menu-item a {
  color: #fff;
  text-decoration: none;
}

.el-menu-item a:hover {
  color: #409EFF;
}

.el-menu-item.is-active a {
  color: #409EFF;
  font-weight: bold;
}

.el-menu-item.is-active {
  background-color: #4a4a4a;
}

.el-breadcrumb {
  margin-bottom: 20px;
}

.el-form-item__label {
  font-weight: bold;
}

.el-button {
  margin-top: 10px;
}

.el-input__inner {
  border-radius: 5px;
}

.el-select .el-input__inner {
  border-radius: 5px;
}

.el-date-editor.el-input__inner {
  border-radius: 5px;
}

/* 提交按钮样式 */
.el-button--primary {
  margin-right: 20px;
}

/* 清空按钮样式 */
.el-button--default {
  margin-left: 20px;
}

/* 血压输入样式 */
.el-row :nth-child(1) {
  font-size: 14px;
}

/* 科室小结样式 */
.department-summary {
  margin-top: 20px;
}

/* 检查项目列表样式 */
.check-items {
  margin-top: 20px;
}

/* 展开面板的标题样式 */
.el-collapse-item__header {
  font-weight: bold;
  background-color: #4a4a4a;
  color: #fff;
  border-bottom: 1px solid #4a4a4a;
}

.el-collapse-item__header.is-active {
  background-color: #333;
}

/* 展开面板的内容样式 */
.collapse-content {
  padding: 20px;
}

.el-collapse-item__content {
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 责任医生部分按钮样式 */
.responsible-doctor .el-button {
  float: right;
  margin-top: 10px;
}

/* 责任医生部分的输入框 */
.responsible-doctor .el-input {
  width: 90%;
}
</style>
